<template>
	<section class="vbox">
		<section class="scrollable padder-lg">
			<div class="row row-sm m-t-md m-b-sm">
				<el-tabs v-model="activeCategory" tab-position="top" @tab-click="query(1)">
					<el-tab-pane label="全部" name=""></el-tab-pane>
					<template v-for="(item,index) in categorys">
						<el-tab-pane :label="item.name" :name="item.code"></el-tab-pane>
					</template>
				</el-tabs>
			</div>
			<div class="row row-sm">
				<el-row :gutter="10">
					<el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in books" :key="item.id">
						<div class="item">
							<div class="pos-rlt">
								<div class="top padder">
									<a href="#" class="pull-right active" data-toggle="class">
										<i class="fa fa-bookmark-o text-active text-primary"></i>
										<i class="fa fa-bookmark text text-info"></i>
									</a>
								</div>
								<!-- <div class="bottom">
												<span class="badge bg-info m-l-sm m-b-sm">300 字</span>
											</div> -->
								<div class="bottom padder m-b-sm">
									<a href="#" class="pull-right active" data-toggle="class">
										<i class="fa fa-heart-o text-danger text-active"></i>
										<i class="fa fa-heart text-danger text"></i>
									</a>
									<a href="#" data-toggle="class">
										<i class="fa fa-plus-circle text"></i>
										<i class="fa fa-check-circle text-active text-info"></i>
									</a>
								</div>
								<router-link :to="'/book/'+ item.id">
									<img :src="$api.file.url.view + item.poster" :alt="item.title + ' | ' + item.author + ' | 回归自性 | 中国'" class="r r-2x img-full">
								</router-link>
							</div>
							<div class="padder-v">
								<span class="text-ellipsis text-black-50 text-sm">{{ item.title }}</span>
								<span class="text-ellipsis text-xs text-muted">{{ item.author }}</span>
							</div>
						</div>
					</el-col>
				</el-row>

				<div class="clearfix visible-xs"></div>
			</div>
			
			<el-pagination 
				background 
				layout="prev, pager, next" :pager-count="5" 
				:total="total" :page-size="pageSize"
				@current-change="query">
			</el-pagination>
			
		</section>
	</section>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		name: 'book',
		components: {

		},
		data() {
			return {
				keywords: '',
				total: 0, // 记录总条数
				pageSize: 16, // 每页显示条数
				pageNo: 1, // 当前的页数
				activeCategory: null,
				categorys: [],
				books: [{
					id: 1,
					title: '心经',
					author: '梵音组合',
					poster: 'https://img14.360buyimg.com/n0/jfs/t16723/155/143367527/375365/dce44c99/5a5ff589Nb147528c.jpg'
				}]
			}
		},
		mounted() {
			//初始化分类
			this.$api.sysDict.queryDictItems("book_category").then(data => {
				this.categorys = data;
			});

			this.query();
		},
		methods: {
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.book.query({
					title: this.keywords,
					publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					category: this.activeCategory == 0 ? null : this.activeCategory
				}).then(data => {
					this.books = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			}
		},
		watch: {
			pageNo(val, oldVal) {
				this.query(val);
				// this.onChange(val)
			}
		}
	}
</script>

<style>
	.el-divider {
		background-color: grey;
	}
</style>
